<template>
    <div class="flex flex-col gap-2 lg:gap-4">
        <div v-for="(release, index) in releases" :key="index" class="flex flex-col gap-2 bg-base-200 shadow-md">
            <!-- 第一行: platform -->
            <div class="font-bold whitespace-normal text-right">
                {{ release.platform }}
            </div>
            <div v-if="release.version" class="font-bold whitespace-normal text-right">
                {{ release.version }}
            </div>
            <!-- 第二行: release信息 -->
            <div class="flex flex-row items-center justify-end gap-2">
                <!-- 第一子列: releaseUrl -->
                <a v-if="release.asset.url" :href="release.asset.url" target="_blank" rel="noopener noreferrer"
                    class="w-6 h-6 flex-shrink-0">
                    <img :src="release.asset.icon">
                </a>
                <!-- 第二子列: fileSize和password -->
                <div v-if="release.asset.size || release.sharePassword || release.filePassword"
                    class="flex flex-col text-base-content whitespace-normal">
                    <p v-if="release.asset.size">{{ release.asset.size }}</p>
                    <p v-if="release.sharePassword">分享: <u>{{ release.sharePassword }} </u></p>
                    <p v-if="release.filePassword">密码: <u>{{ release.filePassword }} </u></p>
                </div>
                <!-- 第三子列:gitProjectUrl -->
                <a v-if="release.gitProject.url" :href="release.gitProject.url" target="_blank"
                    rel="noopener noreferrer" class="w-6 h-6 flex-shrink-0">
                    <img :src="release.gitProject.icon">
                </a>
                <!-- 第四子列: documentation -->
                <a v-if="release.documentation.url" :href="release.documentation.url" target="_blank"
                    rel="noopener noreferrer" class="w-6 h-6 flex-shrink-0">
                    <img :src="release.documentation.icon" alt="documentation">
                </a>
                <!-- 第五子列: maintainer -->
                <div v-if="release.maintainer" class="flex flex-col text-base-content whitespace-normal">
                    {{ release.maintainer }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Detail",
    props: {
        releases: {
            type: Array,
            required: true,
        },
    },
};
</script>
